<template>
  <div
    class="contextmenu"
    :style="{ top: menuStyleData.top + 'px', left: menuStyleData.left + 'px' }"
  >
    <ul @click.stop="keepCur" v-if="this.curComponent != null">
      <template v-if="this.curComponent.islock == false">
        <li @click="_copy">复制</li>
        <li @click="_cut">剪切</li>
        <li @click="_delete">删除</li>
        <li @click="lock">锁定</li>
        <li @click="_topComponent">置顶</li>
        <li @click="_bottomComponent">置底</li>
        <li @click="upComponent">上移</li>
        <li @click="downComponent">下移</li>
      </template>
      <li @click="unlock" v-if="this.curComponent.islock == true">解锁</li>
    </ul>
    <ul @click.stop="keepCur" v-else>
      <li @click="_paste">粘贴</li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {};
  },
  computed: mapState([
    "curComponent",
    "curIndex",
    "menuStyleData",
    "copyData",
    "componentData",
  ]),
  methods: {
    ...mapMutations([
      "getIndex",
      "copy",
      "paste",
      "delete",
      "cut",
      "removeComponent",
      "swapComponent",
      "setCurComponent",
      "hideContextMenu",
      "topComponent",
      "bottomComponent",
      "setLock",
    ]),
    lock() {
      this.setLock(true);
    },

    unlock() {
      this.setLock(false);
    },

    // 点击菜单时不取消当前组件的选中状态
    keepCur() {
      this.hideContextMenu();
    },

    _copy() {
      this.copy();
    },

    _paste() {
      this.paste();
    },
    _delete() {
      this.delete();
    },
    _cut() {
      this.cut();
    },
    upComponent() {
      this.getIndex();
      let index = this.curIndex;
      if (index == -1) return;
      else if (index == this.componentData.length - 1)
        return this.$message("到顶了");
      else this.swapComponent([index, index + 1]);
    },

    downComponent() {
      this.getIndex();
      let index = this.curIndex;
      if (index == -1) return;
      else if (index == 0) return this.$message("到底了");
      else this.swapComponent([index, index - 1]);
    },

    _topComponent() {
      this.getIndex();
      let index = this.curIndex;
      if (index == -1) return;
      this.topComponent(index);
    },

    _bottomComponent() {
      this.getIndex();
      let index = this.curIndex;
      if (index == -1) return;
      this.bottomComponent(index);
    },
  },
};
</script>

<style lang="less" scoped>
.contextmenu {
  position: absolute;
  z-index: 1000;

  ul {
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    margin: 5px 0;
    padding: 6px 0;

    li {
      font-size: 14px;
      padding: 0 20px;
      position: relative;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #606266;
      height: 34px;
      line-height: 34px;
      box-sizing: border-box;
      cursor: pointer;

      &:hover {
        background-color: #f5f7fa;
      }
    }
  }
}
</style>